<template>
    <div class='tabbar'>
        <ul>
            <li v-for='(item,index) in routerList' :key='index' @click='switchTab(item.path)'>
                <img :src="$route.path.includes(item.path) ? item.selected : item.active" alt="">
                <span :class='$route.path.includes(item.path) ? "active" : "" '>{{item.title}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
import { getTopBarList } from '@/common/api/index.js'
export default {
    data () {
        return {
            routerList: [
                {
                    title: '首页',
                    path: '/home',
                    active: '/images/home.png',
                    selected: '/images/home-select.png',
                },
                {
                    title: '分类',
                    path: '/list',
                    active: '/images/list.png',
                    selected: '/images/list-select.png',
                },
                {
                    title: '购物车',
                    path: '/cart',
                    active: '/images/cart.png',
                    selected: '/images/cart-select.png',
                },
                {
                    title: '我的',
                    path: '/my',
                    active: '/images/my.png',
                    selected: '/images/my-select.png',
                }

            ],
            tabBarList: []
        }
    },
    mounted () {
        getTopBarList().then(res => {
            this.tabBarList = res.data
        })
    },
    methods: {
        switchTab (path) {
            // 判断是不是要切换到首页
            // 如果要是切换到首页，首页有多个二级路由
            // 如果不是/home/command这个默认的二级路由的话，会出现页面空白的情况
            if (path == '/home') {
                console.log(this.tabBarList);
                let index = this.$store.state.path.tabBar
                let lastPath = this.tabBarList[index].name
                this.$router.push(`/home/${lastPath}`)
                return
            }
            //判断是否点击的是同一个路由
            if (this.$route.path == path) return;
            //对应跳转页面
            this.$router.push(path);
        }
    }
}
</script>

<style scoped lang='scss'>
.tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.6rem;
    background-color: #fff;
}
.tabbar ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
            width: 0.826666rem;
            height: 0.826666rem;
        }
        span {
            font-size: 0.426666rem;
        }
    }
}
.active {
    color: red;
}
</style>
